<template>
	<view class="auth">
		<view class="title">{{i18n.basic}}</view>
		<view class="input-wrapper" :class="!!focus1 ? 'on' : ''">
			<input class="input-s" type="text" @focus="focus1 = true" @blur="focus1 = false" :placeholder="i18n.name"
			 placeholder-class="placeholder-class" v-model="name" :disabled="isDisable" />
		</view>
		<view class="input-wrapper" :class="!!focus2 ? 'on' : ''">
			<input class="input-s" type="text" @focus="focus2 = true" @blur="focus2 = false" :placeholder="i18n.idCard"
			 placeholder-class="placeholder-class" v-model="cradNumber" :disabled="isDisable" />
		</view>
		<view class="title">{{i18n.attest}}</view>
		<view class="card-container" @click="handleSelectImg">
			<block v-if="!cradImg">
				<image class="card-icon" src="/static/img/newUser/card-zm.png" mode="widthFix"></image>
				<text class="des">{{i18n.cardPic}}</text>
			</block>
			<image v-if="cradImg" class="card-img" :src="cradImg" mode="widthFix"></image>
		</view>
		<view style="margin-top: 40upx;">
			<button class="btn-block" hover-class="btn-hover" style="background: #ccc;" v-if="userInfo.authentication === 3">{{i18n.underReview}}</button>
			<button class="btn-block" hover-class="btn-hover" style="background: #2ecc71;color: #ffffff;" v-if="userInfo.authentication === 1">{{i18n.verified}}</button>
			<button class="btn-block" hover-class="btn-hover" style="background: #e74c3c;color: #ffffff;" v-if="userInfo.authentication === 2"
			 @click="handleAuth">{{i18n.failed}}</button>
			<button class="btn-block" hover-class="btn-hover" v-if="userInfo.authentication === 0" @click="handleAuth">{{i18n.certification}}</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: '',
				cradNumber: '',
				cradImg: '',
				focus1: false,
				focus2: false,
				status: null,
				userInfo: {},
			};
		},
		computed: {
			isDisable() {
				return this.status === 0 || this.status === 1;
			},
			i18n() {
				return this.$t('auth');
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
				title: this.$t('auth.auth')
			})
			this.fetchUserInfo()
		},
		methods: {
			handleAuth() {
				const {
					name,
					cradNumber,
					cradImg
				} = this;
				if (!name || !cradNumber || !cradImg) {
					return this.$toast(this.$t('auth.complete'));
				}
				let data = {
					truename: name,
					card_num: cradNumber
				}
				uni.showLoading();
				this.$upload('api/ucenter/authentication', cradImg, 'file', {
					truename: name,
					card_num: cradNumber
				}, res => {
					uni.hideLoading();
					if (res.code == 200) {
						this.$toast(res.msg)
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					} else {
						setTimeout(() => {
							this.$toast(res.msg)
						})
					}
				})
			},
			fetchUserInfo() {
				this.userInfo = this.$getStore('ucenterInfo', true)
				this.$post('api/ucenter/info')
					.then(res => {
						this.userInfo = res.data
						this.$setStore('ucenterInfo', res.data, true)
					})
			},
			handleSelectImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: (res) => {
						// #ifdef APP-PLUS
						var newimgName = new Date().getTime() + '.jpg'
						plus.zip.compressImage({
							src: res.tempFilePaths[0],
							dst: `_doc/${newimgName}`,
							format: "jpg",
							quality: 40,
							width: "550px"
						}, () => {
							this.cradImg = `_doc/${newimgName}`
						}, (error) => {
							console.log('error')
						});
						//#endif
						//#ifdef H5
						this.cradImg = res.tempFilePaths[0]
						//#endif
					}
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.logo {
		width: 200upx;
		height: 200upx;
	}

	.card-container {
		height: 180px;
		background-color: #F0F5FF;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		border: 1px dashed var(--border);
		border-radius: 10upx;

		.card-icon {
			width: 200upx;
		}

		.card-img {
			max-width: 40%;
		}

		.des {
			font-size: 14px;
			color: var(--txt-color);
			margin-top: 20px;
		}
	}

	.auth {
		padding: 0 30upx 30upx;

		.title {
			font-weight: bold;
			font-size: 32upx;
			margin: 30upx 0;
		}

		.input-wrapper {
			height: 100upx;
			display: flex;
			align-items: center;
			border-bottom: 1px solid var(--border);
			margin-bottom: 30upx;

			.input-s {
				flex: 1;
				font-size: 28upx;
			}

			&.on {
				border-color: var(--theme-color);
			}

			.placeholder-class {
				font-size: 28upx;
			}
		}
	}
</style>
